<template>
	<view class="container">
		<view class="uni-tab-title">
			<view class="line-box">
				<view
					:class="[
						'line-item',
						item.code == curTab ? 'active' : '',
					]"
					v-for="(item, key) in tabList"
					:key="key"
					@click="onClickLine(item)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="time-selector">
		    <view class="time-selector-title"> {{ curTime }} 数据时间</view>
			<view
				v-if="timeList!=''" class="time-tabs" style="margin-top: 5px;">
				<view
					:class="[
						'time-tab',
						item.code == curData ? 'active' : '',
					]"
					v-for="(item, index) in timeList"
					:key="index"
					:data-time="item"
					@click="selectTime(item.code)"
				>
					{{ item.name }}
				</view>
			</view>
			<view v-if="curData == 'zidingyi' && curTab != 3">
				<uni-datetime-picker type="date" :end='endTime' :clear-icon="false" v-model="zdyTime" @change='timeChange' />
			</view>
		</view>
			<kanban-infor-area
			ref="inforArea"
			v-if="curTab != 3"
			:utilData='utilData'
			:title='titleName'></kanban-infor-area>
			<kanban-infor-shop
			ref="inforShop"
			v-if="curTab === 3"
			:utilData='utilData'
			:title='titleName'></kanban-infor-shop>
		
	</view>
</template>

<script>
import { timestampFormatDate } from '../../../utils/FormatTime.js'
import { post, postForm } from '@/utils/request';
import { getOverviewAndAlerts, getAnomalyTrend } from '@/api/check.js';
export default {
	name: '',
	data() {
		return {
			titleName: {
				pjFen: '区域日平均得分',
				Tend: '区域平均得分趋势',
				jkFen: '区域日健康度评分',
				jkTend: '区域健康度评分趋势',
			},
			tabList: [
				{
					name: '区域',
					code: 1
				},
				{
					name: '专业条线',
					code: 2
				},
				{
					name: '车间',
					code: 3
				}
			],
			titleTab: {
				area: {
					pjFen: '区域日平均得分',
					Tend: '区域平均得分趋势',
					jkFen: '区域日健康度评分',
					jkTend: '区域健康度评分趋势',
				},
				tiaoxian: {
					pjFen: '专业条线日平均得分',
					Tend: '专业条线平均得分趋势',
					jkFen: '专业条线日健康度评分',
					jkTend: '专业条线健康度评分趋势',
				},
				shop: {
					pjFen: '车间月平均得分',
					Tend: '车间平均得分对比',
					jkFen: '车间月健康度评分',
					jkTend: '车间健康度评分对比',
				}
			},
			curTab: 1,
			endTime: Date.now(),
			zdyTime: Date.now(),
			echartsView: true,
			curTime: Date.now(),
			popupType: 'bottom',
			rangeTime: [Date.now() - 7*24*3600*1000, Date.now()],
			showModal: false,
			modalTitle: "",
			detailList: [],
			curData: 'today',
			timeList: [
				{
					code: 'today',
					name: '今日'
				},
				{
					code: 'yesterday',
					name: '前一天'
				},
				{
					code: 'zidingyi',
					name: '自定义'
				}
			],
			timeData: {},
			utilData: [],
			equipmentData: [],
		};
	},
	
	watch: {
	},
	onLoad(option) {
	},
	onShow() {
		this.curTime = Date.now()
		this.zdyTime = Date.now() - 2*24*3600*1000
		this.curTime = timestampFormatDate(this.curTime, 'yyyy-MM-dd')
		this.zdyTime = timestampFormatDate(this.zdyTime, 'yyyy-MM-dd')
		this.getData()
		this.$refs.inforArea.getLine()
	},
	methods: {
		onClickLine(item) {
			this.curTab = item.code
			if(this.curTab === 1) {
				this.titleName = this.titleTab.area
				this.getData()
				setTimeout(() => {
					this.$refs.inforArea.getLine()
				}, 50);
			} else if(this.curTab === 2) {
				this.titleName = this.titleTab.tiaoxian
				this.getData()
				setTimeout(() => {
					this.$refs.inforArea.getLine()
				}, 50);
			} else {
				this.titleName = this.titleTab.shop
				setTimeout(() => {
					this.$refs.inforShop.getServerData()
				}, 50);
			}
		},
		selectTime(time) {
			let timeData = ''
			if(time != 'zidingyi') {
				if(time == 'today') {
					timeData = Date.now()
					this.curTime = timestampFormatDate(timeData, 'yyyy-MM-dd')
				} else if(time == 'yesterday') {
					timeData = Date.now() - 1*24*3600*1000
					this.curTime = timestampFormatDate(timeData, 'yyyy-MM-dd')
				}
			} else {
					timeData = this.zdyTime
					this.curTime = timeData
				}
			this.curData = time
			this.getData()
		},
		async getData() {
			uni.showLoading({
				title: '数据加载中！',
				mask: true,
			});
			const userInfor = uni.getStorageSync('userInfor');
			const dataParams = {
				userId: userInfor.userId,
				queryTime: this.curTime
			}
			const res = await getOverviewAndAlerts(dataParams);
			uni.hideLoading();
			let resData = res.data
			let ser = resData.utilization
			this.utilData = resData.utilization
			let midData = resData.equipmentData
			for(var i=0; i< midData.length; i++) {
				if(midData[i].count > 0) {
					midData[i].state = 'warning'
				} else {
					midData[i].state = 'normal'
				}
			}
			this.equipmentData = midData
			
		},
		
		timeChange() {
			this.curTime = this.zdyTime
			this.getData()
		},
		change() {},
		showEquipmentDetail(data) {
		    const details = data.subItem || [];
		    this.modalTitle = data.name + " 详细异常";
		    this.detailList = details;
			this.$refs.popup.open();
		  },
		  
		  closeModal() {
			this.$refs.popup.close();
		  },
	},
}
</script>
<style>
</style>
<style scoped lang="scss">
	.container {
		padding: 12px;
	}
 /* 时间筛选器 */
        .time-selector {
            background: white;
            border-radius: 12px;
            padding: 10px;
			margin-top: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 1px solid #f0f0f0;
        }
		.uni-tab-title {
			border-bottom: 1px solid rgba(237, 237, 237, 0.9);
		}
		.line-box {
			display: flex;
			.line-item {
				text-align: center;
				padding: 10px;
				border-radius: 1px;
				background: #fff;
				z-index: 1;
				flex: calc(25% - 8px);
		
				&.active {
					background: #ffffff;
					color: #4055e6;
					border-bottom: 2px solid #4055e6;
				}
			}
		}
        .time-selector-title {
            font-size: 14px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 10px;
			margin-top: 10px;
            display: flex;
            align-items: center;
        }

        .time-selector-title::before {
            content: '📅';
            margin-right: 8px;
            font-size: 16px;
        }

        .time-tabs {
            display: flex;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 4px;
            gap: 4px;
        }

        .time-tab {
            flex: 1;
            text-align: center;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            color: #8c8c8c;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .time-tab:active {
            transform: scale(0.98);
        }

        .time-tab.active {
            background: #1890ff;
            color: white;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
        }
		
		/* 模态框适配小程序 */
		.modal {
		    display: none;
		    position: fixed;
		    z-index: 1000;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    background: rgba(0, 0, 0, 0.6);
		}
		.popup-wrapper {
		  position: relative;
		  width: 100vw;
		  height: 100vh;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		.popup-content {
		  width: 100% !important;
		  max-width: 100% !important;
		  height: auto;
		  margin: 0;
		  border-radius: 0;
		}
		
		.modal-content {
		  width: 100%;
		  max-height: 80vh;
		  background: white;
		  border-radius: 16px 16px 16px 16px;
		  overflow: hidden;
		}
		
		@keyframes slideUp {
		    from { transform: translateY(100%); }
		    to { transform: translateY(0); }
		}
		
		.modal-header {
		  padding: 16px;
		  border-bottom: 1px solid #f0f0f0;
		  display: flex;
		  align-items: center;
		  justify-content: space-between; /* 确保标题和按钮分居两侧 */
		  background: #fafafa;
		  position: relative; /* 新增：为绝对定位提供参照 */
		}
		
		.modal-title {
		  font-size: 16px;
		  font-weight: 600;
		  color: #262626;
		  flex: 1; /* 新增：标题占据剩余空间 */
		  text-align: center; /* 可选：标题居中 */
		}
		
		.close-btn {
		  width: 28px;
		  height: 28px;
		  border-radius: 50%;
		  background: #f5f5f5;
		  border: none;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 16px;
		  color: #8c8c8c;
		  cursor: pointer;
		  position: absolute; /* 改为绝对定位 */
		  right: 16px; /* 距离右侧16px */
		  top: 50%; /* 垂直居中 */
		  transform: translateY(-50%); /* 垂直居中修正 */
		  z-index: 1; /* 确保在标题上方 */
		}
		
		.modal-body {
		    padding: 16px;
		    max-height: 400px;
		    overflow-y: auto;
		}
		
		.detail-list {
		    display: flex;
		    flex-direction: column;
		    gap: 12px;
		}
		
		.detail-item {
		    background: #fafafa;
		    border-radius: 8px;
		    padding: 12px;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    border-left: 3px solid #1890ff;
		}
		
		.detail-info {
		    flex: 1;
		}
		
		.detail-function {
		    font-size: 14px;
		    font-weight: 500;
		    color: #262626;
		    margin-bottom: 2px;
		}
		
		.detail-desc {
		    font-size: 12px;
		    color: #8c8c8c;
		}
		
		.detail-count {
		    font-size: 16px;
		    font-weight: 700;
		    color: #1890ff;
		    text-align: right;
		}
		/* 底部安全区域 */
		.safe-area {
		    height: 20px;
		}
		
		/* 加载状态 */
		.loading {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100px;
		    color: #8c8c8c;
		    font-size: 14px;
		}
		
		.loading::before {
		    content: '';
		    width: 16px;
		    height: 16px;
		    border: 2px solid #f0f0f0;
		    border-top-color: #1890ff;
		    border-radius: 50%;
		    animation: spin 1s linear infinite;
		    margin-right: 8px;
		}
		
		@keyframes spin {
		    to { transform: rotate(360deg); }
		}
		
		/* 空状态 */
		.empty-state {
		    text-align: center;
		    padding: 40px 20px;
		    color: #8c8c8c;
		}
		
		.empty-state::before {
		    content: '📭';
		    font-size: 32px;
		    display: block;
		    margin-bottom: 8px;
		}
</style>
